<!DOCTYPE html>
<html lang="zh-cn">
<!-- 199010128冉炜业 -->

<style>
	.nonChecked {
		display: inline-block;
		width: 1.1rem;
		height: 1.1rem;
		border: 1px solid #b8b4b4;
		border-radius: 50%;
		cursor: pointer;
		vertical-align: text-bottom;
	}

	.checked {
		display: inline-block;
		width: 1.1rem;
		height: 1.1rem;
		border-radius: 50%;
		cursor: pointer;
		vertical-align: text-bottom;
		background: url(img/gouico.png) no-repeat 0 0;
		background-size: 1.1rem;
		border: 0;
	}
</style>

<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>购物车</title>
	<link rel="stylesheet" href="css/style.css">
	<script src="./js/data.js"></script>
	<script src="https://unpkg.com/vue@next"></script>
</head>

<body>
	<div id="shopcart" class="shop-cart">
		<div class="tabs">
			<div class="border" @mouseenter="tabsAnimate()">
				<!-- data-*表示自定义属性。 -->
				<div class="title active" data-index="0">
					全部商品
					<span class="count">3</span>
				</div>
				<div class="title" data-index="1">
					降价商品
					<span class="count">0</span>
				</div>
				<div class="title last" data-index="2">
					库存紧张
					<span class="count">0</span>
				</div>
				<div class="line"></div>
			</div>
		</div>

		<div class="lists">
			<div class="header">
				<ul class="clearfix">
					<li>
						<span class="select-all" :class="[{nonChecked:nonCheckedAll},{checked:checkAll}]"
							@click="selectAll()" :checked="checkAll"></span>
						<label>全选</label>
					</li>
					<li class="product-info">商品信息</li>
					<li>单价</li>
					<li>数量</li>
					<li>金额</li>
					<li>操作</li>
				</ul>
			</div>

			<div id="shoplist" class="shoplist">
				<!-- 店铺内容及样式参考 -->
				<div class="shop" v-for="(shop,sIndex) in shops" :key="shop.shopId">
					<div class="shop-info">
						<span :class="[{nonChecked:!shop.isChecked},{checked:shop.isChecked}]" 
						:checked="shop.isChecked" @click="selectOneShop(shop.shopId)"></span>
						<span class="shop-tip">店铺：</span>
						<a class="shop-name" href="#">{{ shop.shopName}}</a>
						<a href="#" class="wangwang">旺旺</a>
					</div>
					<div class="products">
						<div :class="['item',{listColor:(pIndex + 1)%2 == 0}]" v-for="(product,pIndex) in shop.products"
							:key="product.productId">
							<div class="select-logo">
								<span :class="[{nonChecked:!product.isChecked},{checked:product.isChecked}]"
									:checked="product.isChecked" @click="selectOne(product.productId)"></span>
								<img :src="product.topImg" alt="产品logo">
							</div>
							<div class="product-detail">
								<div class="left">
									<a href="#" class="product-name">
										{{ product.productName}}
									</a>
									<div class="logos">
										<a href="#" class="card">信用卡</a>
										<a href="#" class="service">保障服务</a>
										<a href="#" class="order">订单险</a>
										<a href="#" class="seven">7天无理由</a>
									</div>
								</div>
								<div class="right" v-html="product.spec"></div>
							</div>
							<div class="price">
								<p class="market-price">￥{{product.marketPrice}}</p>
								<p class="real-price">￥{{ product.price}}</p>
							</div>
							<div class="count">
								<span class="sub" @click="reduce(product)">-</span>
								<span class="input"><input type="text" :value="product.count"></span>
								<span class="add" @click="add(product)">+</span>
							</div>
							<div class="amount">￥{{ product.amount}}</div>
							<div class="delete">
								<a href="#" @click="del(sIndex,pIndex)"></a>
							</div>
						</div>
					</div>
				</div>

			</div>
		</div>

		<div class="operate">
			<div class="left">
				<span :class="[{nonChecked:nonCheckedAll},{checked:checkAll}]" 
				@click="selectAll()" :checked="checkAll"
					class="select-all-footer"></span>
				<a href="javascript:void(0);" @click="delChecked()">删除</a>
			</div>

			<div class="right">
				<div>已选择商品<span class="selected-count">{{sumGoods}}</span>件</div>
				<div class="amount">合计（不含运费）： <span class="sum">￥{{sumPrice}}</span></div>
				<a href="javascript:void(0);" class="settle">结算</a>
			</div>
		</div>
	</div>
	<script>


		// vue实例
		Vue.createApp({
			data() {
				return {
					checkAll: false,
					shops: shopcarts,
					nonCheckedAll: true,
				}
			},
			methods: {
				// 实现头部的动画
				tabsAnimate() {
					var titles = document.querySelectorAll('.title')
					var line = document.querySelector('.line')
					for (let i = 0; i < titles.length; i++) {
						titles[i].addEventListener('mouseenter', function () {
							for (var j = 0; j < titles.length; j++) {
								titles[j].classList.remove('active')
							}
							this.classList.add('active')
							line.style.left = i * line.offsetWidth + 'px'
						})
					}
				},
				// 商品数量增加
				add(num) {
					num.count++;
					num.amount = num.count * num.price;
				},
				// 商品数量减少
				reduce(num) {
					if (num.count === 0) {
						num.count
					} else {
						num.count--;
						num.amount = num.count * num.price;

					}
				},
				// 删除
				del(sIndex, pIndex) {
					this.shops[sIndex].products.splice(pIndex, 1)
					let p = this.shops[sIndex].products
					if (p.length == 0) {
						this.shops.splice(sIndex, 1)
					}
					if (this.shops.length == 0) {
						alert("没有商品了")
					}
				},
				// 选择删除
				delChecked() {
					if (this.checkAll) {
						this.shops.splice(0, this.shops.length)
						this.checkAll = false;
					}
					else {
						this.shops.map((shop, i) => {
							if (shop.isChecked) {
								this.shops.splice(i, 1)
							} else {
								this.shops.map((shop) => {
									shop.products.map((product, i) => {
										if (product.isChecked) {
											shop.products.splice(i, 1);
										}
									})
								})
							}
						})
					}
				},
				// 全选与取消全选
				selectAll() {
					// 全选未选中时 this.checkAll=false
					if (!this.checkAll) {
						this.checkAll = true;
						this.shops.map(shop => {
							shop.isChecked = true;
							shop.products.map(product => {
								product.isChecked = true
							})
						});
					} else {
						this.checkAll = false;
						this.shops.map(shop => {
							shop.isChecked = false;
							shop.products.map(product => {
								product.isChecked = false;
							})
						});
					}
				},
				// 单选商铺
				selectOneShop(sId) {
					this.shops.map(shop => {
						if (sId == shop.shopId) {
							if (shop.isChecked == false) {
								shop.isChecked = true;
								shop.products.map(product => {
									product.isChecked = true
								})
							} else {
								shop.isChecked = false;
								shop.products.map(product => {
									product.isChecked = false
								})
								this.checkAll = false
							}
						}
					})
					let result = this.shops.map(shop => {
						return shop.isChecked;
					})
					let bool = result.every(shop => {
						return shop == true;
					})
					if (bool) {
						this.checkAll = true
					} else {
						this.checkAll = false
					}
				},
				// 单选
				selectOne(pId) {
					this.shops.map(shop => {
						shop.products.map(product => {
							if (pId == product.productId) {
								if (product.isChecked == false) {
									product.isChecked = true
								}
								else {
									product.isChecked = false
								}
							}
						})
					})
					this.shops.map(shop => {
						let resultP = shop.products.map(product => {
							return product.isChecked
						})
						let boolP = resultP.every(shop => {
							return shop == true;
						})
						if (boolP) {
							shop.isChecked = true
						} else {
							shop.isChecked = false
						}
					})
					let result = this.shops.map(shop => {
						return shop.isChecked;
					})
					let bool = result.every(shop => {
						return shop == true;
					})
					if (bool) {
						this.checkAll = true
					} else {
						this.checkAll = false
					}
				},
			},

			computed: {
				// 数量计算
				sumGoods() {
					let allGoods = 0;
					this.shops.forEach(shop => {
						shop.products.forEach(product => {
							if (product.isChecked) {
								allGoods += product.count;
							}
						});
					});
					return allGoods;
				},

				// 总价计算
				sumPrice() {
					let allPrice = 0;
					this.shops.forEach(shop => {
						shop.products.forEach(product => {
							if (product.isChecked) {
								allPrice += (product.count * product.price);
							}
						})
					});
					return allPrice;
				},

			},
		}).mount("#shopcart")
	</script>
</body>

</html>